<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <link href="assets/css/bootstrap.min.css" rel="stylesheet" />
 <link rel="stylesheet" href="assets/css/font-awesome.min.css" />
 <!--[if IE 7]>
 <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
 <![endif]-->
 <link rel="stylesheet" href="assets/css/ace.min.css" />
 <link rel="stylesheet" href="css/style.css"/>
 <script type="text/javascript" src="js/vue.min.js"></script>
 <script type="text/javascript" src="js/axios.js"></script>
 <title>产品管理</title>
</head>

<body>
<div class="page-content">
 <div class="gys_style">
  <div class="Manager_style">
   <div class="title_name">添加产品</div>
   <button type="button" class="btn btn-primary" id="Add_Product_btn">添加产品</button>
   <div class="Add_Manager_style">
    <div id="Add_Product_style" style="display:none">
     <div class="page-content">
      <div class="add_user_style clearfix">
       <form action="/test3.do" method="post" onsubmit="return validateForm()">
        <ul class="clearfix">
         <li><label class="label_name">产品名称</label> <input name="name" type="text"  class="text_add" id="name_text"/><i style="color:#F60; ">*</i></li>
         <li><label class="label_name">产品联系人</label><input name="uname" type="text"  class="text_add"/></li>
         <li><label class="label_name">产品联系电话</label><input name="tel" type="text"  class="text_add"/></li>
        </ul>
        <div class="Remark"><label class="label_name">备注</label><textarea name="text" cols="" rows="" style=" width:436px; height:200px; padding:5px;"></textarea></div>
        <!--     <div class="btn_operating"><button  type="button" class="btn btn-primary" id="submit">保存</button><button  type="button" class="btn btn-warning">重置</button></div>-->
        <div style="text-align: center;">
         <input type="submit" value="添加" style="display: inline-block;"class="btn btn-primary">
        </div>
       </form>
      </div>
     </div>
    </div>
   </div>
  </div>
  <div class="Manager_style">
   <span class="title_name">产品信息</span>
   <table class="table table-striped table-bordered table-hover" id="app" >
    <thead>
    <tr>
     <th>序号</th>
     <th>名称</th>
     <th>联系人</th>
     <th>联系电话</th>
     <th>备注</th>
     <th>操作</th>
    </tr>
    </thead>
    <tbody >
    <tr v-for="p in Product" >
     <td >{{p.id}}</td><td>{{p.name}}</td><td>{{p.uname}}</td><td>{{p.tel}}</td><td>{{p.text}}</td>
     <td><button type="button" class="btn btn-info Product_Details" onclick="window.open('产品详情.html', 'newWindow', 'width=600,height=400')">详情</button>
      <button type="button" class="btn btn-primary" onclick="window.location.href = '1产品修改.html'">修改</button>
      <button type="button" class="btn btn-warning" @click="d(p.id)">删除</button></td>
    </tr>
    </tbody>
   </table>
   <div class="page_style">
    <select name="" size="1">
     <option value="1">10</option>
     <option value="2">20</option>
     <option value="3">30</option>
    </select>
    <a href="" class="icon-step-backward page_btn" ></a>
    <a href="" class="icon-caret-left page_btn"></a>
    第
    <select name="" size="1">
     <option value="1">1</option>
     <option value="2">2</option>
     <option value="3">3</option>
    </select>
    共2页
    <a href="" class=" icon-caret-right page_btn"></a>
    <a href="" class="icon-step-forward page_btn"></a>
   </div>
  </div>
 </div>
</div>
<div class="" id="Product_Details" style="display:none">
 <div class="page-content">

  <div class="Product_Details Order_Details_style">
   <div class="Numbering"><b>#0号柴油产品详细</b></div>
   <div>
    <ul class="clearfix">
     <li><label class="label_name">产品名称</label><span>2016年询价项目</span></li>
     <li><label class="label_name">产品联系人</label><span>南京扬子江码头</span></li>
     <li><label class="label_name">联系电话</label><span>2016-4-15 12:34</span></li>
     <li><label class="label_name">产品备注</label><span>长江号</span></li>
    </ul>
   </div>
  </div>
  <div>
   <div class="add_Attributes"><button class="btn btn-primary Attribute_btn" type="button">添加属性</button></div>
   <table class="table table-striped table-bordered table-hover">
    <thead>
    <tr><th>序号</th><th>产品属性</th><th>操作</th></tr>
    </thead>
    <tbody>
    <tr>
     <td>1</td>
     <td>属性名称1</td>
     <td><button type="button" class="btn btn-primary">修改属性</button><button type="button" class="btn btn-warning">删除</button></td>
    </tr>
    <tr>
     <td>2</td>
     <td>属性名称2</td>
     <td><button type="button" class="btn btn-primary">修改属性</button><button type="button" class="btn btn-warning">删除</button></td>
    </tr>
    <tr>
     <td>3</td>
     <td>属性名称3</td>
     <td><button type="button" class="btn btn-primary">修改属性</button><button type="button" class="btn btn-warning">删除</button></td>
    </tr>
    <tr>
     <td>4</td>
     <td>属性名称4</td>
     <td><button type="button" class="btn btn-primary">修改属性</button><button type="button" class="btn btn-warning">删除</button></td>
    </tr>
    </tbody>
   </table>
  </div>
  <div class="add_Attributes"><button class="btn btn-primary Attribute_btn" type="button">添加属性</button></div>
 </div></div>
<!--添加属性样式-->
<div class="Attributes_style" id="add_Attributes_style" style="display:none">
 <input name="" type="text"  class="Attributestext" id="shuxin"/><!--<button type="button" class="btn btn-primary">添加</button>-->
</div>

<!--[if !IE]> -->
<script src="assets/js/jquery.min.js"></script>
<!-- <![endif]-->

<!--[if !IE]> -->

<script type="text/javascript">
 window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
</script>

<!-- <![endif]-->

<!--[if IE]>
<script type="text/javascript">
 window.jQuery || document.write("<script src='assets/js/jquery-1.10.2.min.js'>"+"<"+"/script>");
</script>
<![endif]-->
<script src="assets/layer/layer.js" type="text/javascript"></script>
<script type="text/javascript">
 $('.Product_Details').on('click', function(){
  layer.open({
   type: 1,
   title: '产品详情',
   maxmin: true,
   shadeClose: true, //点击遮罩关闭层
   area : ['720px' , '500px'],
   content: $('#Product_Details')
  });
 });
 $('.Attribute_btn').on('click', function(){
  layer.open({
   type: 1,
   title: '添加属性',
   shadeClose: true, //点击遮罩关闭层
   area : ['330px' , '180px'],
   content:$('#add_Attributes_style'),
   btn:['提交','取消'],
   yes: function(index, layero){
    if($("#shuxin").val()==""){
     layer.alert('属性名称不能为空!',{
      title: '提示框',
      icon:0,
     });
     return false;
    }
    else{
     layer.alert('添加成功！',{
      title: '提示框',
      icon:1,
     });
     layer.close(index);
    }

   }
  });
 });
 $('#Add_Product_btn').on('click', function(){
  layer.open({
   type: 1,
   title: '添加/修噶产品',
   shadeClose: true, //点击遮罩关闭层
   area: ['600px' , ''],
   content: $('#Add_Product_style'),
   btn:[],
   yes: function(index, layero){
    if($("#name_text").val()==""){
     layer.alert('产品名称不能为空!',{
      title: '提示框',
      icon:0,
     });
     return false;
    }
    else{
     layer.alert('添加成功！',{
      title: '提示框',
      icon:1,
     });
     layer.close(index);
    }
   }
  })
 });
</script>
<script>
 new Vue({
  el:"#app",
  data:{
   Product:[]
  },
  mounted(){
   this.getProduct();
  },
  methods:{
   getProduct(){
    axios.get("Productlist.do").then(dt=>{
     this.Product = dt.data;
    })
   },
   d(id){
    axios.get("delete3.do?id="+id).then(
    )
    this.getProduct()
   },
  }
 })
</script>
<script>
 function validateForm() {
  var name = document.getElementsByName('name')[0].value;
  var uname = document.getElementsByName('uname')[0].value;
  var tel = document.getElementsByName('tel')[0].value;

  if (name === '' || uname === '' || tel === '') {
   alert('请填写所有必填字段。');
   return false; // 阻止表单提交
  }

  return true; // 提交表单
 }
</script>
</body>
</html>
